{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}Teacher Dashboard — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .td-stat { border-radius:.875rem; overflow:hidden; border:0; transition:transform .15s, box-shadow .15s; }
  .td-stat:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.1) !important; }
  .td-stat .ts-accent { height:3px; }
  .td-stat .ts-body { padding:1rem 1.25rem; display:flex; align-items:center; gap:.875rem; }
  .td-stat .ts-icon { width:44px; height:44px; border-radius:.625rem; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
  .tc-table th { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; background:#fafafa; border-bottom:2px solid #f3f4f6; padding:.75rem 1rem; }
  .tc-table td { font-size:.85rem; border-bottom:1px solid #f3f4f6; vertical-align:middle; padding:.75rem 1rem; }
  .tc-table tbody tr:hover td { background:#f9fafb; }
  .tc-table tbody tr:last-child td { border-bottom:0; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">Teacher Dashboard</h4>
        <p class="text-muted small mb-0">Welcome back, <strong>{{ request.user.get_display_name }}</strong></p>
    </div>
    <a href="{% url 'courses:course_create' %}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-2"></i>Create Course
    </a>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card td-stat shadow-sm">
            <div class="ts-accent" style="background:#1a56db;"></div>
            <div class="ts-body">
                <div class="ts-icon" style="background:#eff6ff;"><i class="bi bi-collection-fill" style="color:#1a56db;"></i></div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ total_courses }}</div>
                    <div class="text-muted" style="font-size:.75rem;">My Courses</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card td-stat shadow-sm">
            <div class="ts-accent bg-success"></div>
            <div class="ts-body">
                <div class="ts-icon bg-success bg-opacity-10"><i class="bi bi-broadcast text-success"></i></div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ published_courses }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Published</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <a href="{% url 'enrollments:teacher_enrollment_review' %}?status=approved" class="text-decoration-none">
            <div class="card td-stat shadow-sm">
                <div class="ts-accent" style="background:#0891b2;"></div>
                <div class="ts-body">
                    <div class="ts-icon" style="background:#ecfeff;"><i class="bi bi-people-fill" style="color:#0891b2;"></i></div>
                    <div>
                        <div class="fw-bold fs-4 lh-1 text-dark">{{ total_students }}</div>
                        <div class="text-muted" style="font-size:.75rem;">Active Students</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
        <a href="{% url 'certifications:proctor_queue' %}" class="text-decoration-none">
            <div class="card td-stat shadow-sm">
                <div class="ts-accent" style="background:#7c3aed;"></div>
                <div class="ts-body">
                    <div class="ts-icon" style="background:#f5f3ff;"><i class="bi bi-camera-video-fill" style="color:#7c3aed;"></i></div>
                    <div>
                        <div class="fw-bold fs-4 lh-1 text-dark">{{ assigned_cert_programs }}</div>
                        <div class="text-muted" style="font-size:.75rem;">Cert Programs</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<!-- My Courses Table -->
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-header bg-white rounded-top-4 border-0 d-flex justify-content-between align-items-center px-4 py-3">
        <h5 class="fw-bold mb-0">My Courses</h5>
        <a href="{% url 'courses:course_create' %}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus me-1"></i>New Course
        </a>
    </div>
    <div class="table-responsive">
        <table class="table tc-table mb-0">
            <thead>
                <tr>
                    <th class="ps-4">Course</th>
                    <th>Status</th>
                    <th>Modules</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for course in my_courses %}
                <tr>
                    <td class="ps-4">
                        <div class="fw-medium small">{{ course.title }}</div>
                        <div class="text-muted" style="font-size:.72rem;">{{ course.duration }}</div>
                    </td>
                    <td>
                        {% if course.status == 'published' %}
                            <span class="badge rounded-pill" style="background:#dcfce7;color:#15803d;font-size:.72rem;"><i class="bi bi-circle-fill me-1" style="font-size:.4rem;"></i>Published</span>
                        {% else %}
                            <span class="badge rounded-pill" style="background:#f3f4f6;color:#6b7280;font-size:.72rem;"><i class="bi bi-circle me-1" style="font-size:.4rem;"></i>Draft</span>
                        {% endif %}
                    </td>
                    <td><span class="fw-medium small">{{ course.get_module_count }}</span></td>
                    <td>
                        <div class="d-flex gap-1">
                            <a href="{% url 'courses:manage_course' pk=course.pk %}" class="btn btn-sm" style="background:#eff6ff;color:#1a56db;border:none;" title="Manage">
                                <i class="bi bi-gear"></i>
                            </a>
                            <a href="{% url 'courses:course_edit' pk=course.pk %}" class="btn btn-sm" style="background:#fef3c7;color:#92400e;border:none;" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn btn-sm" style="background:#ecfeff;color:#0891b2;border:none;" target="_blank" title="View">
                                <i class="bi bi-eye"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="text-center py-5 text-muted">
                        <i class="bi bi-collection" style="font-size:2rem;opacity:.3;"></i>
                        <p class="mt-2 mb-0 small">No courses yet. <a href="{% url 'courses:course_create' %}">Create your first course</a></p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}